import React, { Component } from 'react'
import { List, Card, Button, Breadcrumb } from 'antd';
import { Link } from 'react-router-dom'
import { connect } from 'react-redux';
import { change_msg_state, del_msg} from '../../store/actionCreators'

class MsgList extends Component {
  render() {
    return (
      <Card title={
        <Breadcrumb>
            <Breadcrumb.Item><Link to="/admin/dashboard">仪表盘</Link></Breadcrumb.Item>
            <Breadcrumb.Item>消息中心</Breadcrumb.Item>
          </Breadcrumb>
      }>
        <List
          bordered
          dataSource={this.props.MsgList}
          renderItem={(item, index) => (
            <List.Item actions={[
                <Button type="primary" shape="round" onClick={() => {this.props.finished(index)}} key="edit" disabled={item.hasRead ? true : false}>{item.hasRead ? '已读' : '点击已读'}</Button>, 
                <Button type="danger" shape="round" onClick={() => {this.props.delMsg(index)}} key="del">删除</Button>]}>
              {item.context}
            </List.Item>
          )}
        />
      </Card>
    )
  }
}

// 将store的state绑定到组件的props上
const mapStateToProps = (state) => {
  return {
    MsgList: state.msg
  }
}
// 将actions绑定到组件的props上
const mapDispatchToProps = (dispatch) => {
  return {
    finished: (index) =>{
      dispatch(change_msg_state(index))
    },
    delMsg: (index) => {
      dispatch(del_msg(index))
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(MsgList)
